<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartDataT" />
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart  :pie-data="pieData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {listBrands} from "@/api/business/brands";
import {listModels} from "@/api/business/models";
import {listProducts} from "@/api/inventory/products";
import {accounting, getLineQuotationChartAmount, getMaintenanceCount} from "@/api/commom";


const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
    xData: [120, 82, 91, 154, 162, 140, 145],
    legendData: ['报价金额', '收款金额']
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {

    return {
      lineChartData: lineChartData.newVisitis,
      lineChartDataT: {
        expectedData: [],
        xData:[],
        actualData: [],
        legendData:['日常维修','故障']
      },
      pieData:[
        { value: 0, name: '终止' },
        { value: 0, name: '生效中' },
        { value: 0, name: '结束' },
        { value: 0, name: '签约中' }
      ],


    }
  },
  mounted() {
    this.getBrandsList();
    this.getProductsList();
    this.getBrandsModelsList();
    this.getLineQuotationChartAmount();
    this.getMaintenanceCount();
     this.getAccounting();
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    //

      getAccounting(){
        accounting(this.query).then(response => {
          this.pieData[0].value = response.heTongCount.zhongzhi;
           this.pieData[1].value = response.heTongCount.shengxiaozhong
           this.pieData[2].value = response.heTongCount.jieshu;
           this.pieData[3].value = response.heTongCount.qianyuezhong;


          console.log("7777777777", this.pieData
          )
        });

      },

    // 获取电梯品牌数据并存入本地缓存
    getBrandsList() {
      localStorage.removeItem('brands');
      listBrands({pageSize: 10000}).then(response => {
        // 为每个品牌对象添加 value 字段
        const brandsWithValues = response.rows.map(brand => ({
          ...brand,
          value: brand.name
        }));
        // 将 response.rows 转换为 JSON 字符串并存储到 localStorage
        localStorage.setItem('brands', JSON.stringify(brandsWithValues));
      }).catch(error => {
        console.error('获取品牌数据失败:', error);
      });

    },

    // 获取折线图报价数据
    getLineQuotationChartAmount(){
      getLineQuotationChartAmount().then(response => {
        console.log('6666666',response)
        this.lineChartData.xData = response.xData;
        this.lineChartData.expectedData = response.expectedData;
        this.lineChartData.actualData = response.actualData;
      }).catch(error => {
        console.error('获取数据失败:', error);
      });

    },
    getMaintenanceCount(){
      getMaintenanceCount().then(response => {
        console.log('6666666',response)
        this.lineChartDataT.xData = response.xData;
        this.lineChartDataT.expectedData = response.expectedData;
        this.lineChartDataT.actualData = response.actualData;
      }).catch(error => {
        console.error('获取数据失败:', error);
      });
    },
    // 获取电梯型号数据并存入本地缓存
    getBrandsModelsList() {
      localStorage.removeItem('brands_models');
      listModels({pageSize: 10000}).then(response => {
        // 为每个品牌对象添加 value 字段
        const brandsWithValues = response.rows.map(model => ({
          ...model,
          value: model.model
        }));
        // 将 response.rows 转换为 JSON 字符串并存储到 localStorage
        localStorage.setItem('brands_models', JSON.stringify(brandsWithValues));
      }).catch(error => {
        console.error('获取电梯品牌型号数据失败:', error);
      });

    },
    // 获取库存产品数据并存入本地缓存
    getProductsList() {
      localStorage.removeItem('products');
      listProducts({pageSize: 10000}).then(response => {
        // 为每个品牌对象添加 value 字段
        const brandsWithValues = response.rows.map(model => ({
          ...model,
          value: model.model
        }));
        // 将 response.rows 转换为 JSON 字符串并存储到 localStorage
        localStorage.setItem('products', JSON.stringify(brandsWithValues));
      }).catch(error => {
        console.error('获取库存产品数据数据失败:', error);
      });

    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
